<template>

  <div style="margin-top: 60px;">
    <div style="background-color: white;padding:20px">
      <div style="display: flex;justify-content: center;margin-top: 20px">
        <img style="width:150px;height:120px;" src="@/assets/love.png"/>
      </div>
      <!--    <van-cell-group>-->
      <van-field v-model="title" label="电影名" placeholder="请输入电影名称"/>
      <van-field v-model="url" label="百度云链接" placeholder="请输入百度云链接"/>
      <van-field v-model="urlKey" label="提取码" placeholder="请输入提取码"/>
      <!--    </van-cell-group>-->
      <div style="display: flex;justify-content: center;margin-top: 20px;margin-bottom: 20px">
        <van-button v-if="!isLogin" style="width:80%" :loading="btnLoading" @click="showLogin">请先登录</van-button>
<!--        <div v-if="!isLogin" class="thank">请先登录</div>-->
        <van-button v-if="isLogin" style="width:80%" :loading="btnLoading" @click="saveShare">提交</van-button>
      </div>
    </div>
    <div
      style="background-color:white;margin-top:10px;padding:20px;display:flex;justify-content: center;align-items:center;flex-direction: column;">
      <img style="width:150px;height:150px" src="@/assets/wechat.png"/>
      <div style="font-size: 14px;color: #858585;margin-top: 10px;margin-bottom: 10px">关注公众号U ´ᴥ` U</div>
    </div>

  </div>
</template>

<script>
  import {save} from '@/api/movieShare'
  import {getStore} from "@/utils/storage";
  import Bus from '@/utils/bus';

  export default {
    name: 'Share',
    components: {},
    computed: {
      isLogin() {
        return getStore('avatar') !== null
      },
    },
    data() {
      return {
        btnLoading: false,
        title: '',
        url: '',
        urlKey: '',
      }
    },
    methods: {
      showLogin() {
        Bus.$emit("showLogin");
      },
      saveShare() {
        if (this.title === '') {
          this.$toast("请输入电影名称");
          return;
        }
        if (this.url === '') {
          this.$toast("请输入网盘链接");
          return;
        }
        let params = {
          title: this.title,
          url: this.url,
          urlKey: this.urlKey
        }
        this.btnLoading = true
        save(params).then(r1 => {
          this.btnLoading = false;
          this.$message.success("感谢您的分享，审核成功后将被收录");
          this.title = '';
          this.url = '';
          this.urlKey = ''
        }).catch(err => {
          this.btnLoading = false;
          console.log("保存失败")
        })
      }
    }
  }
</script>

<style scoped>
  .love {
    width: 250px;
    height: 200px;
    margin-top: 30px;
  }

  body {
    margin: 0;
    background: #ededed;
  }

  .content-wrap {
    width: 1200px;
    margin: 0 auto;
  }

  .content {
    margin-top: 20px;
    display: flex;
  }

  .content-left {
    width: 850px;
  }

  .content-right {
    /*background-color: yellow;*/
    width: 320px;
    margin-left: 30px;
  }

  .detail {
    background-color: white;
    padding: 50px 30px 50px 60px;

  }

  .item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }

  .item-txt {
    width: 60px;
    font-size: 14px;
    text-align: right;
    margin-right: 10px;
  }

  .input {
    width: 400px;
  }

  .thank {
    margin-bottom: 20px;
    font-size: 14px;
  }

  .btn {
    margin-top: 10px;
    /*margin-left: 110px;*/
  }

  .title {
    font-weight: bold;
    margin-bottom: 30px;
    /*margin-top: 111px;*/
    font-size: 20px;
  }

  /*留言*/
  .adv-wrap {
    background-color: white;
    margin-bottom: 10px;
  }

  .adv {
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

</style>
